<template>
  <el-container class="faultAlertContainer">
    <el-header>
      <span style="color: white">
          车辆号：
        </span>
      <el-cascader
          :options="trainList"
          v-model="trainvalue"
          :show-all-levels="false"
          expandTrigger="hover"
          @change=selectTrain
      >
      </el-cascader>
      <!--      系统选择-->
      <span style="color: white;margin-left: 25px">系统：</span>
      <!--      <el-select v-model="sysvalue" placeholder="请选择" style="width:110px">-->
      <el-select v-model="sysvalue" placeholder="请选择" style="width:140px;height: 32px;color: white">
        <el-option
            v-for="item in sysOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
<!--      故障等级选择-->
      <span style="margin-left: 1%;color: white">故障等级：</span>
      <el-select v-model="faultLevelValue" placeholder="请选择" style="width:140px;height: 32px">
        <el-option
            v-for="item in faultLevelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
<!--      起始时间和结束时间选择-->
        <span style="margin-left: 1%;color: white" class="demonstration">时间范围：</span>
        <el-date-picker
            class="faultAlertdate"
            v-model="timeIntervalOption"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="--"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            style="width:480px;"
        @change="timeIntervalChoose">
        </el-date-picker>
<!--      故障区间选择-->
      <span style="margin-left: 25px;color: white">故障区间：</span>
      <el-autocomplete
          class="inline-input"
          v-model="timeOption"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
          style="width:140px;height: 32px"
      ></el-autocomplete>
<!--      故障查询-->
      <el-button style="margin-left: 25px;width:60px;text-align: center" type="primary" @click="faultsSelected">查询</el-button>
<!--      故障清洗-->
      <el-button style="width:60px;text-align: center" type="primary" plain @click="showpopup">清洗</el-button>
    </el-header>
    <el-main class="faultMainContainer">
        <span style="color: white;font-size:16px">故障告警信息：</span>

        <!--      //故障信息表格-->
        <FaultAlertTable style="margin-top: 16px" :tableData="this.faultListShow" :highLightCode="this.faultToDraw"
        @faultToChart = "faultToChart"></FaultAlertTable>
        <!--      //翻页操作-->
        <div class="block" style="float: right">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="this.pageSize"
              layout="prev, pager, next, jumper"
              :total="this.totalFaultSize"
              style="background-color: #0B1021;">
          </el-pagination>
        </div>

    </el-main>
    <el-footer>
      <!--      数据获取由子组件自行获取-->
      <FaultParaChart :chartId=1 :faultCode="this.faultToDraw"></FaultParaChart>
    </el-footer>
  </el-container>

</template>

<script>
import FaultAlertTable from "@/components/FaultManage/FaultAlert/FaultAlertTable";
import FaultParaChart from "@/components/FaultManage/FaultAlert/paramentsChart";
import axios from "axios";
// import * as echarts from 'echarts';
// let faultAlertGlobalSetting = {
//   pageSize: 10, //每页显示故障数量
// }

export default {
  components: {FaultParaChart, FaultAlertTable},
  // components: {FaultAlertTable},
  data() {
    return {
      popup: 1,//初始为0，弹窗不显示
      screenWidth: document.body.clientWidth,
      urlBase: process.env.VUE_APP_BASE_URL || "http://119.23.127.239:3333/phm-web-service-gz/",
      trainList: [],
      train: [],
      highLigthFault:'',
      // 系统选择
      sysOptions: [{
        value: '选项1',
        label: '牵引系统'
      }, {
        value: '选项2',
        label: '制动系统'
      }, {
        value: '选项3',
        label: '车门系统'
      }, {
        value: '选项4',
        label: '乘客报警'
      }, {
        value: '选项5',
        label: '走行部'
      }],
      // // 车号选择
      // trainOptions: [{
      //   value: '选项1',
      //   label: '017018'
      // }, {
      //   value: '选项2',
      //   label: '017019'
      // }, {
      //   value: '选项3',
      //   label: '017020'
      // }, {
      //   value: '选项4',
      //   label: '017021'
      // }, {
      //   value: '选项5',
      //   label: '017022'
      // }],
      // 故障等级选择
      faultLevelOptions: [{
        value: '严重',
        label: '严重'
      }, {
        value: '中等',
        label: '中等'
      },{
      value: '轻微',
          label: '轻微'
    },{
        value: '提示',
        label: '提示'
      }],
      // 时间选择
      pickerOptions: {
        shortcuts: [{
          text: '最近一天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', [start, end]);
            // console.log("wwww",picker);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          },
        }]
      },
      // 故障时间区间选择
      faultTimeOptions: { "value": "60" },
      timeOption: "30",
      timeIntervalOption: ["2021-01-01 08:00:00","2021-01-02 08:00:00"],
      sysvalue: '牵引系统',
      trainvalue: [],
      faultLevelValue: '严重',
      currentPage: 1,
      pageSize: 5,
      faultList: [],//筛选后的故障列表
      faultListShow: [],//当前页面显示的故障
      totalFaultSize: 10,
      faultToDraw: 9007,
      // chartData:{
      //   chartId:1,
      //   title: '车辆参数',
      //   legend: {data: ['Email']},
      //   xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      //   series: [{
      //     name: 'Email',
      //     type: 'line',
      //     stack: 'Total',
      //     areaStyle: {},
      //     emphasis: {
      //       focus: 'series'
      //     },
      //     data: [120, 132, 101, 134, 90, 230, 210]
      //   },]
      // }

    }
  },
  methods: {
    // getParams: function () {
    //   // console.log("!!!!!!!!" + this.$route.query.train);
    //   // console.log("!!!!!!!!" + this.$route.query.code);
    //   if(this.$route.query.train != null ){
    //     this.train = this.$route.query.train;
    //     this.highLigthFault = this.$route.query.code;
    //     this.faultToDraw = this.$route.query.code;
    //     console.log("转入页面时:",this.faultToDraw);
    //   }
    // },
    //获取车辆线路列表
    getSelectList: function () {
      // console.log("1111");
      let url = this.urlBase + 'line/ganged';
      let that = this;
      that.trainList = [];
      axios.get(url, {
        params: "lineCode",
      }).then(function (resp) {
        // console.log(resp);
        that.trainList = resp.data.result;
        that.trainvalue.push(that.trainList[0].value);
        that.trainvalue.push(that.trainList[0].children[0].value);
        // console.log("初始的train：",that.trainList[0].children[0].value)
        that.selectTrain(that.trainvalue);
        // console.log("faultalertPage: train",that.trainList,that.train);
      })
    },
    //选定的线路号和车辆号
    selectTrain: function (option) {
      // console.log("aaa " + option);
      // let url = this.urlBase + 'FaultManage/FaultAlert/Sys';
      let that = this;
      this.line = option[0];
      this.train = option[1];
      // console.log("faultalertPage: 2222",that.line,that.train);
    },
    //获取车辆系统列表
    getSysList: function () {
      // console.log("1111");
      let url = this.urlBase + 'FaultManage/FaultAlert/Sys';
      let that = this;
      this.pageSize = 5;//每页显示故障数量
      that.sysOptions = [];
      axios.get(url, {
        params: "lineCode",
      }).then(function (resp) {
        // console.log(resp);
        that.sysOptions = resp.data;
        // console.log("FaultAlertPage.vue:",that.sysOptions);
      })
    },
    // //获取车辆号列表
    // getTrainList: function () {
    //   // console.log("1111");
    //   let url = this.urlBase + 'FaultManage/FaultAlert/TrainList';
    //   let that = this;
    //   that.trainOptions = [];
    //   axios.get(url, {
    //     params: "lineCode",
    //   }).then(function (resp) {
    //     // console.log(resp);
    //     that.trainOptions = resp.data;
    //     // console.log("FaultAlertPage.vue:",that.trainOptions);
    //   })
    // },
    // //获取故障等级列表
    // getFaultLevel: function () {
    //   // console.log("1111");
    //   that.faultLevelOptions = ['严重','中等','轻微','提示'];
    //   let url = this.urlBase + 'FaultManage/FaultAlert/FaultLevel';
    //   let that = this;
    //   that.faultLevelOptions = [];
    //   axios.get(url, {
    //     params: "lineCode",
    //   }).then(function (resp) {
    //     // console.log(resp);
    //     // that.faultLevelOptions = resp.data;
    //     that.faultLevelOptions = ['严重','中等','轻微','提示'];
    //     // console.log("FaultAlertPage.vue:",that.faultLevelOptions);
    //   })
    // },
    //选择起始时间和终止时间
    timeIntervalChoose:function (){
      // this.pickerOptions()
      // console.log("44444 ",this.timeIntervalOption);
      this.beginTime = this.timeIntervalOption[0];
      this.endTime = this.timeIntervalOption[1];
      // console.log("5555 ",this.beginTime);
    },
    querySearch(queryString, cb) {
      let faultTimeOptions = this.faultTimeOptions;
      let results = queryString ? faultTimeOptions.filter(this.createFilter(queryString)) : faultTimeOptions;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "30" },
        { "value": "60" },
        { "value": "120" }
      ];
    },
    handleSelect(item) {
      // console.log(item);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updateFaultList();
      // console.log(`当前页: ${val}`);
    },
    updateFaultList: function () {
      // console.log("faultalertpage.vue:",this.currentPage,this.totalFaultSize,this.pageSize,this.totalFaultSize / this.pageSize);
      //前端进行翻页操作
      this.faultListShow=[];
      let totalPage =  Math.ceil(this.totalFaultSize / this.pageSize);//总页数，向上取整
      // console.log("faultalertpage.vue: 1111111",totalPage);
      if(this.currentPage < totalPage)
      {
        this.faultListShow = this.faultList.slice((this.currentPage - 1) * this.pageSize,(this.currentPage - 1) * this.pageSize + this.pageSize);
      }else{
        // console.log("最后一页：",(this.currentPage - 1) * this.pageSize,this.totalFaultSize - (this.currentPage - 1) * this.pageSize);
        this.faultListShow = this.faultList.slice((this.currentPage - 1) * this.pageSize,this.totalFaultSize);
      }
    },

    faultsSelected: function () {
      let url = this.urlBase + 'faultManage/faultAlert';
      let that = this;
      that.faultList = [];
      // console.log("传给后端的数据：",this.train,this.sysvalue,this.faultLevelValue);
      axios({
        method: "post",
        url:url,
        data:{
          trainCode: this.train,
          systemCode: this.sysvalue,
          faultLevel: this.faultLevelValue,
          beginTime: this.beginTime,
          endTime: this.endTime,
        }
      }).then((res)=>{
        // console.log("faultAlertPage0002:",res.data);
        that.faultList = res.data.result.records;
        that.faultToDraw = that.faultList[0].faultCode;
        console.log("getfaultToDraw:",that.faultToDraw);
        // 由线网监控页面转过来时传递的参数
        if(this.$route.query.train != null ){
          this.train = this.$route.query.train;
          this.highLigthFault = this.$route.query.code;
          this.faultToDraw = this.$route.query.code;
          console.log("转入页面时:",this.faultToDraw);
        }
        that.totalFaultSize = that.faultList.length;
          for(let i = 0; i < that.totalFaultSize; i++){
            if(that.faultList[i].faultCode == that.faultToDraw){
              that.currentPage = Math.ceil((i + 1) / that.pageSize);
            }
          }
        // console.log("当前页：", that.train,that.currentPage,that.totalFaultSize);
        //   // console.log("faultAlertPage:11111",that.faultList)
          that.$nextTick(()=>{
            that.updateFaultList();
          })
      })
      // console.log("faultAlertPage12345:",this.faultLevelValue);
      // axios.post(url, {
      //   params: {
      //     // lineCode:
      //     trainCode: this.trainvalue,
      //     systemCode: this.sysvalue,
      //     faultLevel: this.faultLevelValue,
      //     beginTime: this.beginTime,
      //     endTime: this.endTime,
      //   }
      // }).then(function (resp) {
      //   that.faultList = resp.data.result.records;
      //   that.totalFaultSize = that.faultList.length;
      //   // console.log("faultAlertPage:11111",that.faultList)
      //   that.$nextTick(()=>{
      //     that.updateFaultList();
      //   })
      // })
      // console.log("that.totalFaultSize:",this.totalFaultSize);
    },

    //打开活动规则页面
    showpopup: function (){
      this.popup = 1;
      // console.log("6666",this.popup);
    },
    //关闭活动规则页面
    closepopup() {
      this.popup = 0;
      // console.log("777",this.popup);
    },
    faultToChart:function(payload){
      // console.log("faultAlertPage003:",payload.faultCode);
      this.faultToDraw = payload.faultCode;
    }

  },
  mounted() {
    // this.getParams();//由线网监控页面转过来时传递的参数
    this.faultTimeOptions = this.loadAll();
    this.currentPage = 1;
    this.getSelectList();
    // console.log("train：",this.train);
    this.getSysList();
    // this.getTrainList();
    // this.getFaultLevel();
    this.faultsSelected();
    this.timeIntervalChoose();
  }
}
</script>

<style>
#el-select {
  color:#ffffff;
  width:30px;
}

.rule {
  position: absolute;
  width: 0.82rem;
  height: 0.36rem;
  top: 0.08rem;
  right: 0rem;
  background: #111111;
}
.login {
  position: fixed;
  font-size: 24px;
  height: 360px;
  width: 240px;
  background-color: #000000;
  border-radius: 0.25rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
/*header部分*/
/*.el-header{*/
/*  background-color: #13192C;*/
/*}*/
/*main部分（表格）*/
el-main.el-main faultMainContainer{
  background-color: #13192C!important;
}
.el-footer{

}
.over {
  position: fixed;
  width: 100%;
  height: 100%;
/*//透明度为70%*/
  opacity: 0.7;
filter: alpha(opacity=70);
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #111111;
}
.el-pager, .el-pager li{
  background-color: #0B1021;
  color: #C0C4CC;
  /*color: white;*/
}
.el-input__inner, .el-cascader-menu__list {
  /* background-color: #333a3e; */
  background: #171F37;
  color: #ffffff;
  border-right: 1px solid #303030;
  border-color: #1D3A7F;
}
/*故障区间下拉框颜色修改*/
/deep/ .el-autocomplete-suggestion__wrap {
  background-color: #171F37;
  color: white;
}
/*故障区间下拉框字体颜色修改*/
.el-autocomplete-suggestion li {
   color: white;
 }
/*系统选择下拉框背景色和字体颜色*/
.el-select-dropdown__list {
 background-color: #171F37;
  color: white;
}
/*!*系统选择下拉框文字背景色*!*/
/*.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {*/
/*  background: linear-gradient(to right, rgba(24, 124, 255, 0.05) 0%, rgba(24, 124, 255, 0.48) 98%, rgba(24, 124, 255, 1)98%, rgba(24, 124, 255, 1)100%);*/
/*}*/
/*车辆号选择下拉框背景颜色修改*/
.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
  background: linear-gradient(to right, rgba(24, 124, 255, 0.05) 0%, rgba(24, 124, 255, 0.48) 98%, rgba(24, 124, 255, 1)98%, rgba(24, 124, 255, 1)100%);
}
/*系统选择和故障等级选择下拉框，鼠标悬浮时背景颜色修改*/
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: linear-gradient(to right, rgba(24, 124, 255, 0.05) 0%, rgba(24, 124, 255, 0.48) 98%, rgba(24, 124, 255, 1)98%, rgba(24, 124, 255, 1)100%);
}
/*!*时间范围选择背景颜色修改*!*/
/*.el-picker-panel{*/
/*  background: #171F37;*/
/*  color: white;*/
/*}*/
/*.el-picker-panel [slot=sidebar], .el-picker-panel__sidebar {*/
/*  background-color: #171F37;*/
/*  color: white;*/
/*}*/
/* .el-picker-panel__footer {*/
/*  background-color: #171F37;*/
/*  color: white;*/
/*}*/
.el-pagination .btn-next, .el-pagination .btn-prev {
  background: center center no-repeat #0B1021;
}

.el-pagination button:disabled {
  color: #C0C4CC;
  background-color: #0B1021;
  cursor: not-allowed;
}
.el-input__inner{
  color: white;
}
.el-pagination__editor.el-input .el-input__inner {
  width: 30px;
}
.el-date-editor .el-range-input {
  background-color: #171f37;
  color: white;
}
.el-range-editor.el-input__inner {
  background-color: #171f37;
  border-color: #1D3A7F;
}
.el-date-editor .el-range-separator {
  color: #ffffff;
}
.el-button {
  padding: 12px 0px;
}
</style>